<template>
  <div>
    <div class="show-banner" v-if="this.showBanner.tp_type == 1">
      <div class="pic" @click="itemClick">
        <img :src="pic" alt="" />
      </div>
      <div class="title">
        <div class="title-lf" :style="{color: this.showBanner.title2_color,border: '.013333rem solid' + this.showBanner.title2_color}">{{ title2 }}</div>
        <div class="title-rh">{{ title }}</div>
      </div>
    </div>
    <div class="show-banner-title" v-else>
      <div class="banner-title">
        <div>
          <div class="banner-title-rh">{{ title }}</div>
          <div class="banner-title-line"></div>
        </div>
        <div></div>
      </div>
      <div class="show-pic" @click="itemClick">
        <img :src="pic" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showBanner: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    itemClick() {
      // let type = this.showBanner.page_type
      // let nameurl = this.showBanner.param.target_url
      // let realurl = 'https://www.277sy.com/index.php/Singlepage/idcard_certification'
      // if (nameurl) {
      //   nameurl = nameurl.substr(0, 63)
      // }
      // if (this.showBanner.tp_type == 1) {
      //   if (type === "gameinfo") {
      //     this.$router.push("/gameinfo/gameid/" + this.showBanner.param.gameid)
      //   } else if (type === "vip_center") {
      //     this.$router.push("/vip_center")
      //   } else if (type === "url") {
      //     if (nameurl === realurl) {
      //       this.$router.push('/user_idcard_add')
      //     }else {
      //       // window.location.href = this.showBanner.param.target_url
      //       let url = this.showBanner.param.target_url
      //       this.$router.push({path: '/targetpage',query: {url: url}})
      //     }
      //   } else if (type === "openBrowser") {
      //     // window.location.href = this.showBanner.param.target_url
      //     let url = this.showBanner.param.target_url
      //     this.$router.push({path: '/targetpage',query: {url: url}})
      //   }
      // } else {
      //   this.$router.push("/game_container/container_id/" + this.showBanner.param.game_list_id )
      // }
    },
  },
  computed: {
    title() {
      return this.showBanner.title;
    },
    title2() {
      return this.showBanner.title2 || "";
    },
    pic() {
      return this.showBanner.pic;
    },
  },
};
</script>

<style scoped>
.show-banner {
  box-sizing: border-box;
  width: 8.933333rem;
  padding: .266667rem 0 0;
}

.pic {
  width: 8.933333rem;
  height: 4rem;
  border-radius: .266667rem;
  overflow: hidden;
}

.pic img {
  width: 8.933333rem;
  height: 4rem;
}

.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: .266667rem;
}

.title-lf {
  width: 1.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: .066667rem;
  border: .013333rem solid #222;
  color: #000;
  font-size: .32rem;
  text-align: center;
  border-radius: .066667rem;
}

.title-rh {
  margin-left: .133333rem;
  color: #666666;
  font-size: .32rem;
}

.show-banner-title {
  box-sizing: border-box;
  width: 8.933333rem;
  padding: .266667rem .4rem 0;
}

.banner-title {
  display: flex;
  justify-content: space-between;
}

.banner-title-rh {
  font-size: .48rem;
  color: #222222;
  font-weight: 800;
}

.banner-title-line {
  width: 100%;
  height: .106667rem;
  background-color: #ff5543;
  margin-top: -0.16rem;
}

.show-pic {
  margin-top: .4rem;
  width: 9.2rem;
  height: 4rem;
  border-radius: .266667rem;
  overflow: hidden;
}

.show-pic img {
  width: 9.2rem;
  height: 4rem;
}
</style>